iT邦幫忙

DAY 21
0

Reactjs 30 天邊做邊學系列系列 第 21

Reactjs Day 21 - 複製元件與參考

  • 分享至 

  • xImage
  •  

複製元件
在少數的情況下,某個元件可能想要變更不屬於自己的 props(例如: 修改 this.props.children 的 className)。
或者是複製多個被傳入的元件。cloneWithProps() 使這件事變的可能。

ReactComponent React.addons.cloneWithProps(ReactComponent component, object? extraProps)

複製淺層的 component 然後合併 extraProps 。 Props 被使用和 transferPropsTo() 一樣的方式合併,所以類似像 className 屬性就會被整合進去。

注意:
cloneWithProps 不會轉移 key 屬性至複製的元件中。如果您希望保存 key,請使用 extraProps 物件

var clonedComponent = cloneWithProps(originalComponent, { key : originalComponent.props.key });

元件的參考
如果您正在使用 React 元件到一個大型未使用 React 的程式中或者正在轉移重寫,您可能會需要保留元件的參考。 React.renderComponent 會回傳一個已掛載元件的參考

var myComponent = React.renderComponent(<MyComponent />, myContainer);

務必注意。元件的建構子並沒有回傳物件實例,就只是 descriptor 就是我們一開始說的標記物件,一個輕量化用來告訴 React 該輸出什麼 DOM 結構的描述物件

/** @jsx React.DOM */

var myComponent = <MyComponent />; // This is just a descriptor.

// Some code here...

myComponent = React.renderComponent(myComponent, myContainer);

this.props.children undefined
簡單的說您不能透過 this.props.children 存取元件結構中的子元素,直接看程式碼理解

/** @jsx React.DOM */

var App = React.createClass({
  componentDidMount: function() {
    // This doesn't refer to the spans! It refers to the children between
    // last line's <App></App>, which are undefined.
    console.log(this.props.children);
  },

  render: function() {
    return <div><span/><span/></div>;
  }
});

React.renderComponent(<App></App>, mountNode);

上一篇
Reactjs Day 20 - 單元測試
下一篇
Reactjs Day 22 - 實作一個 Tabs 元件
系列文
Reactjs 30 天邊做邊學系列30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言